import { Tabbar } from 'react-vant'
import { TodoList, WapHome, Setting, Underway } from '@react-vant/icons'
import { CusMenuItem, navMenu } from "@components/menus.ts";
import { useNavigate } from "react-router-dom";
import React from "react";

// 为 IconMap 添加类型注解
const IconMap: { [key: string]: React.ReactNode } = {
    home: <WapHome />,
    tool: <Underway />,
    statistic: <TodoList />,
    setting: <Setting />,
};

const TabbarBottom = () => {
    const navigate = useNavigate();
    const changeMenuItem = (item: CusMenuItem) => {
        navigate(item.path)
    }
    return (
        <div className='demo-tabbar'>
            <Tabbar>
                {navMenu.filter((item: CusMenuItem) => item.tabbar).map((item: CusMenuItem) => {
                    const icon = typeof item.icon === 'string' ? IconMap[item.icon] : item.icon;
                    return (
                        <Tabbar.Item
                            key={item.id}
                            onClick={() => changeMenuItem(item)}
                            icon={icon}
                        >
                            {item.text}
                        </Tabbar.Item>
                    );
                })}
            </Tabbar>
        </div>
    )
}
export default TabbarBottom